<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			#div1.box-re,
			#div2.box-re {
				position: inherit;
			}
			
			#div1> div {
				width: 100%;
				height: 60px;
				transition: none;
			}
			
			.jingguo {
				float: left;
				display: inline;
				padding: 20px;
				cursor: pointer;
				background: #efefef;
			}
			
			.chuxian {
				float: left;
				display: inline;
				padding: 20px;
				margin-left: 20px;
				display: none;
				cursor: pointer;
				background: #efefef;
			}
			
			#div1> div {
				width: 100%;
				height: 100px;
				position: relative;
			}
			
			#div1> div span {
				width: 100px;
				height: 100px;
				background: #efefef;
				transition: none;
				line-height: 100px;
				font-size: 32px;
				text-align: center;
				cursor: pointer;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			#div2> div {
				height: 100px;
				position: relative;
				overflow: hidden;
				transition: none;
				background: #c00;
			}
			
			#div2 ul {
				margin: 0;
				padding: 0;
				position: absolute;
				left: 0;
				top: 0;
				transition: none;
				background: green;
			}
			
			#div2 li {
				float: left;
				list-style: none;
				margin: 0 10px 0 0;
				padding: 0;
				width: 100px;
				height: 100px;
				border: 0px double red;
				background: #efefef;
				line-height: 100px;
				font-size: 32px;
				text-align: center;
				cursor: pointer;
			}
		</style>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、向右移动<br><br>
			<div><span>飘</span></div>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、无缝滚动<br><br>
			<button class="btn btn-info">向左滚动</button> <button class="btn btn-info">向右滚动</button>
			<br><br>
			<div>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>向右移动：</b><code>offsetLeft</code> 例如可以通过<code>onclick="alert(this.offsetLeft)"</code> 查看left的值（左边距）。让物体向右动起来，其实就是自动修改绝对定位的left。通过定时器，让aSpn1的left每30毫秒自动加10像素，并还给他自己。<code>aSpn1.style.left=aSpn1.offsetLeft+Speed+'px';</code></p>
			<p><b>无缝滚动：</b>开定时器，让ul的left自动增加。但是当ul一走，ul后边div的背景就漏出来了。所以可以通过复制一份ul的innerHTML<code>ul.innerHTML=ul.innerHTML+ul.innerHTML</code> 然后需要修改ul的宽度，他得宽度等于<code>li.length*li.offsetWidth+'px'</code> 但是这个ul也有滚完的时候，所以可以让ul滚动到一半的时候<code>if(ul.style.left>=ul的宽度/2)</code>，把left的值改为初始化<code>ul.style.left=0</code>。
			</p>
		</div>

	</BODY>

</HTML>